<template>
    <div>
        <div class="map"></div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { reactive, onMounted } from 'vue'
import { map } from '@/request/index'

onMounted(()=>{
fun(100000,'中国')
})

let mapArr=reactive([
  {
    adcode:100000,
    name:'中国'
  }
])
const fun=(adcode,name)=>{
  map(adcode).then(res=>{
    console.log(res)
    var myChart = echarts.init(document.querySelector('.map'));
   echarts.registerMap( name,res.data);
    let option = {
     
      tooltip: {
        trigger: 'item',
        formatter: '{b}<br/>{c} (p / km2)'
      },
     
      visualMap: {
        min: 8,
        max: 50,
        text: ['High', 'Low'],
        realtime: false,
        calculable: true,
        inRange: {
          color: ['lightskyblue', 'yellow', 'orangered']
        }
      },
      series: [
        {
          name: name,
          type: 'map',
          map: name,
          label: {
            show: true
          },
          data: res.data.features.map((item)=>{
            return{
              name: item.properties.name,
              value: item.properties.childrenNum,
              adcode: item.properties.adcode
            }
          })

         
        }
      ]
    }
    option && myChart.setOption(option);

    myChart.off('click',onclick)
    myChart.off('contextmenu',oncontextmenu)

    myChart.on('click',function(params){
      console.log(params)
      fun(params.data.adcode,params.data.name)
      mapArr.push({
        name: params.data.name,
        adcode: params.data.adcode
      })
      
    })

     myChart.on('contextmenu',function(params){
      console.log(params)
     mapArr.pop()
     let {adcode,name}=mapArr[mapArr.length-1]
      fun(adcode,name)
    })


  })
}

</script>

<style lang="scss" scoped>
.map {
    width: 500px;
    height: 500px;
}
</style>